<template>
  <div class="table-box table-content">
    <ProTable
      ref="proTable"
      :columns="columns"
      :request-api="emailTransferRequestRulesList"
      :init-param="initParam"
      :request-auto="true"
      :data-callback="dataCallback"
      :search-col="{ xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" :icon="CirclePlus" @click="toRules('add', scope)">新增</el-button>
        <el-button type="primary" :icon="EditPen" plain @click="toRules('edit', scope)">编辑</el-button>
        <el-button type="primary" :icon="Delete" plain @click="del(scope)">删除</el-button>
      </template>
    </ProTable>
  </div>
</template>
<script lang="ts" setup name="emailTransferRequestRules">
import { ref, reactive, onMounted, watch } from "vue";
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps, HeaderRenderScope } from "@/components/ProTable/interface";
import { emailTransferRequestRulesList } from "@/api/modules/rule";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { delRule } from "@/api/modules/rule";

const proTable = ref<ProTableInstance>();
const router = useRouter();
watch(
  () => router.currentRoute.value,
  () => {
    proTable.value?.getTableList(); // 路由变化时刷新数据
  }
);
onMounted(() => {
  proTable.value?.getTableList();
});
const dataCallback = (data: any) => {
  return {
    list: data.data,
    total: data.totalSize,
    pageNum: data.page,
    pageSize: data.rows
  };
};
const initParam = ref("");
const columns = ref<ColumnProps[]>([
  {
    type: "selection"
  },
  {
    label: "名称",
    prop: "ruleName",
    search: {
      el: "input",
      tooltip: "输入规则包名称",
      label: "规则包名称",
      key: "ruleQueryDTO.ruleName"
    }
  },
  {
    label: "类型",
    prop: "flagName",
    render(h) {
      return "自定义邮件转请求规则";
    }
  },
  {
    label: "执行次数",
    prop: "salience"
  },
  {
    label: "描述",
    prop: "description",
    search: {
      el: "input",
      tooltip: "输入规则包描述",
      label: "规则包描述",
      key: "ruleQueryDTO.description"
    }
  }
]);
const toRules = (key: string, row: any) => {
  if (key === "add") {
    router.replace(`/business/rules/emailTransferRequestRules/addRules`);
  } else if (key === "edit") {
    console.log(row.selectedList[0]);
    if (row.selectedList.length === 0) {
      ElMessage.warning("请选择一条数据");
      return;
    }
    if (row.selectedList.length > 1) {
      ElMessage.warning("选择数据不得多于一个");
      return;
    }
    if (row.selectedList[0].ruleName === "默认请求规则") {
      ElMessage.warning("默认请求规则不允许编辑");
      return;
    }
    router.replace(
      `/business/rules/requestRules/emailTransferRequestRules?ruleNo=` +
        row.selectedList[0].ruleNo +
        `&packageNo=` +
        row.selectedList[0].rulePackageNo +
        `&flag=requestFit`
    );
  }
};
const del = (row: any) => {
  if (row.selectedList.length === 0) {
    ElMessage.error("请选择至少一条数据");
    return;
  }
  ElMessageBox.confirm("确实要删除所选数据吗？", "删除确认", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
    center: true
  })
    .then(async () => {
      let params = "";
      row.selectedList.forEach(item => {
        console.log(item);
        params += "ruleNos=" + item.ruleNo + "&";
      });
      try {
        const data = await delRule(params);
        if (data) {
          ElMessage.success("删除成功");
          proTable.value?.getTableList();
        }
      } catch {
        ElMessage.error("此数据存在相关联的数据，不能删除");
      }
      ElMessage({
        type: "success",
        message: "删除成功"
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    });
};
</script>
